<template>
	<view>
		<view class="topBox">
			<view :style="{height: (statusBarHeight) + 'px'}"></view>
			<view class="upper" :style="{height: (navigationBarHeight ) + 'px'}">
				<image class="iconImg" @click="GoBack()" src="https://img.wilmer.com.cn/admin/2024/3-31/GoBack.png"
					mode=""></image>
				<view class="conter_box">{{title}}</view>
			</view>
		</view>
		<view class="option">
			<view class="option_box" v-for="(item,index) in list" :key='index'
				:class="{'special fade_Zoom' : currindex== index}" @click="onclick(item,index)">
				<view class="money">¥<text>{{item.name}}</text></view>
				<view class="substance">{{item.content}}</view>
				<image class="Popular" v-if="item.recommend && currindex == 1"
					src="https://img.wilmer.com.cn/admin/2024/3-25/WechatIMG26.jpg" mode="">
				</image>
				<view class="give">{{item.content1}}</view>
				<view class="give" v-if="item.name == '399'">{{item.content2}}</view>
			</view>
		</view>
		<view class="btn" @click="GoPay()">立即支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				optionObj: {},
				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 44, // 导航栏高度

				list: [{
					name: "29.9",
					content: "留学报告",
					content1: '',
					recommend: false
				}, {
					name: "399",
					content: "至臻留学报告",
					content1: '留学相关视频',
					content2: '24小时人工客服',
					recommend: true
				}, {
					name: "99.9",
					content: "详细留学报告",
					content1: '24小时人工客服',
					recommend: false
				}],
				currindex: 1,
				payForm: {
					getSchoolVo: {} // AI报告
				}, // 支付参数

				orderNumber: "", // 订单编号
			}
		},
		onLoad(option) {
			this.optionObj = option
			if (option.state == 1) {
				this.title = `视频教你${option.type}`
			} else {
				this.title = `一对一帮你${option.type}`
			}
		},
		onShow() {
			// 获取顶部安全距离
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
		},
		methods: {
			GoBack() {
				uni.navigateBack()
			},
			onclick(item, index) {
				this.currindex = index
			},
			GoPay() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				// let that = this
				// uni.login({
				// 	"provider": "weixin",
				// 	success: (res) => {
				// 		setTimeout(() => {
				// 			uni.hideLoading();
				// 		}, 500)
				// 		this.payForm.code = res.code
				// 		// this.payForm.prise = Number(this.list[this.currindex].name) * 100
				// 		this.payForm.prise = 1

				// 		GetPayAi(this.payForm).then(res => {
				// 			// 参考示例。
				// 			let sign = JSON.parse(res.data.data);
				// 			that.orderNumber = res.data.orderNumber

				// 			uni.requestPayment({
				// 				provider: 'wxpay',
				// 				timeStamp: sign.timeStamp,
				// 				nonceStr: sign.nonceStr,
				// 				package: sign.package,
				// 				signType: sign.signType,
				// 				paySign: sign.paySign,
				// 				success: function(res) { // 支付成功的回调
				// 					// console.log('success:' + JSON.stringify(res));
				// 					uni.reLaunch({
				// 						url: `/pages/knowledge/educational?orderNumber=${that.orderNumber}`
				// 					})
				// 				},
				// 				fail: function(err) { // 用户取消支付的回调
				// 					// console.log('fail:' + JSON.stringify(err));
				// 					uni.showToast({
				// 						title: '你已取消支付',
				// 						icon: 'none'
				// 					})
				// 				}
				// 			});

				// 		})
				// 	}
				// })

				if (this.optionObj.state == 1) {
					this.$tab.navigateTo(`/pages/business/VideoList?type=${this.optionObj.type}`)
				} else {
					this.$tab.navigateTo(`/pages/business/OneonOne?type=${this.optionObj.type}`)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topBox {
		width: 100vw;
		height: 580rpx;
		background: url('https://img.wilmer.com.cn/admin/2024/3-31/%E5%9B%BE%E5%B1%82%202%206.png') no-repeat;
		background-size: 100% 100%;
	}

	.upper {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.conter_box {
			font-family: PingFang SC;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.iconImg {
			width: 28rpx;
			height: 40rpx;
			position: absolute;
			left: 28rpx;
		}
	}

	.option {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.option_box {
			padding-top: 32rpx;
			width: 220rpx;
			height: 284rpx;
			border-radius: 16rpx;
			border: 1px solid #319AF5;
			color: #319AF5;
			position: relative;

			.hot {
				width: 58rpx;
				height: 58rpx;
				position: absolute;
				top: -4rpx;
				left: -4rpx;
			}

			.money {
				font-family: Branding-BoldItalic;
				font-size: 32rpx;
				font-weight: 400;
				letter-spacing: 0.03em;
				text-align: center;

				text {
					font-family: Branding-BoldItalic;
					font-size: 48rpx;
					font-weight: 500;
					letter-spacing: 0.03em;
				}
			}

			.substance {
				margin-top: 20rpx;
				font-family: Branding-BoldItalic;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0.03em;
				text-align: center;
			}

			.Popular {
				width: 104rpx;
				height: 96rpx;
				position: absolute;
				left: -4rpx;
				top: -8rpx;
			}

			.give {
				font-family: Branding-BoldItalic;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0.03em;
				text-align: center;
			}
		}

		.special {
			background: #319AF5;
			border: 1px solid #319AF5;
			color: #FFFFFF;
		}
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: #319AF5;
		font-family: Branding-BoldItalic;
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.03em;
		color: #fff;
		margin: 500rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fade_Zoom {
		animation: pulse;
		animation-duration: 2s; // 时间
		animation-iteration-count: 1; // 此行次数
	}
</style>